<template>
	<div class="testList-war text-white">
		<pol-title title="炉次检化验列表"></pol-title>
		<div class="border-solid bg-tm radius-sm padding">
			<div class="text-green2 text-xl" style="text-decoration: underline;">
				条件选择
			</div>

			<el-form :model="form" label-width="auto" class="margin-top-lg" style="max-width: 600px">
				<el-form-item label="炉号选择">
					<div style="width: 100%; position: relative; top: -3px;" @click="lcSelect">
						<el-input v-model="form.name" size="large" input-style="color: #fff" readonly>
							<template #suffix>
								<el-icon color="#fff">
									<Edit />
								</el-icon>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label=" " style="margin-top: -15px;">
					<el-checkbox v-model="checked2" size="large">
						<template #default>
							<span class="text-white text-lg">当前炉次</span>
						</template>
					</el-checkbox>
				</el-form-item>
				<el-form-item label="钢种选择" size="large">
					<el-select v-model="form.region" placeholder="请选择">
						<el-option label="45" value="shanghai" />
						<el-option label="46" value="231" />
						<el-option label="47" value="sdf" />
						<el-option label="48" value="asgd" />
						<el-option label="49" value="asdff" />
					</el-select>
				</el-form-item>
			</el-form>

			<!-- 结果列表 -->
			<div class="text-center text-xl margin-top">结果列表</div>

			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt" height="770px" class="margin-top">
				<template #ItemCode="{ row }">
					<span :class="row.P_IsSys == '0-0.05' ? 'text-orange' : ''">{{row.ItemCode}}</span>
				</template>
				<template #ItemName="{ row }">
					<span :class="row.P_IsSys == '0-0.05' ? 'text-orange' : ''">{{row.ItemName}}</span>
				</template>
				<template #ItemValue="{ row }">
					<span :class="row.P_IsSys == '0-0.05' ? 'text-orange' : ''">{{row.ItemValue}}</span>
				</template>
				<template #IsDefault="{ row }">
					<span :class="row.P_IsSys == '0-0.05' ? 'text-orange' : ''">{{row.IsDefault}}</span>
				</template>
				<template #P_IsSys="{ row }">
					<div class="flex align-center" :class="row.P_IsSys == '0-0.05' ? 'text-orange' : ''">
						<el-icon v-if="row.P_IsSys == '0'">
							<QuestionFilled />
						</el-icon>
						<el-icon v-if="row.P_IsSys == '0-0.05'">
							<TopRight />
						</el-icon>
						<el-icon v-if="row.P_IsSys == '0.08-0.2'">
							<Check />
						</el-icon>
						<span class="margin-left-sm">
							{{row.P_IsSys}}
						</span>
					</div>

				</template>
			</pol-table>
		</div>

		<el-dialog v-model="dialogPlanPopup" title="炉次计划选择" width="1300" center align-center class="search-light">
			<div class="flex align-center padding-bottom margin-bottom">
				<span class="margin-right">关键字</span>
				<el-input style="width: 440px" placeholder="请输入关键字" size="large" />
			</div>
			<pol-table ref="polTableRef" v-bind="tableOpt2" cellClassName="cellClass" @rowClick="rowClick"></pol-table>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	const form = ref({
		name: '',
		name2: '',
		name3: ''
	})
	const checked2 = ref()

	//表格配置
	const columns = ref([
		{ label: '成分', key: 'ItemCode', align: 'center', minWidth: '60', slot: true },
		{ label: '连铸', key: 'ItemName', align: 'center', minWidth: '60', slot: true },
		{ label: '转炉', key: 'ItemValue', align: 'center', minWidth: '70', slot: true },
		{ label: '精练', key: 'IsDefault', align: 'center', minWidth: '70', slot: true },
		{ label: '区间值', key: 'P_IsSys', align: 'left', minWidth: '110', slot: true },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: 'C',
				ItemName: '0.15',
				ItemValue: '0.15',
				IsDefault: '0.15',
				P_IsSys: '0.08-0.2',
			},

			{
				ItemCode: 'Si',
				ItemName: '0.15',
				ItemValue: '0.15',
				IsDefault: '0.15',
				P_IsSys: '0.08-0.2',
			},
			{
				ItemCode: 'Mn',
				ItemName: '0.15',
				ItemValue: '0.15',
				IsDefault: '0.15',
				P_IsSys: '0.08-0.2',
			},
			{
				ItemCode: 'P',
				ItemName: '0.3',
				ItemValue: '0.3',
				IsDefault: '0.3',
				P_IsSys: '0-0.05',
			},
			{
				ItemCode: 'S',
				ItemName: '0.3',
				ItemValue: '0.3',
				IsDefault: '0.3',
				P_IsSys: '0-0.05',
			},
			{
				ItemCode: 'B',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0',
				P_IsSys: '0',
			},
			{
				ItemCode: 'Ai',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0',
				P_IsSys: '0',
			},
			{
				ItemCode: 'V',
				ItemName: '0.15',
				ItemValue: '0.15',
				IsDefault: '0.15',
				P_IsSys: '0.08-0.2',
			},
			{
				ItemCode: 'Ti',
				ItemName: '0.15',
				ItemValue: '0.15',
				IsDefault: '0.15',
				P_IsSys: '0.08-0.2',
			},
			{
				ItemCode: 'Nb',
				ItemName: '0.15',
				ItemValue: '0.15',
				IsDefault: '0.15',
				P_IsSys: '0.08-0.2',
			},
			{
				ItemCode: 'Cr',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0',
				P_IsSys: '0',
			},
			{
				ItemCode: 'Ti',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0',
				P_IsSys: '0',
			},
			{
				ItemCode: 'Mo',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0',
				P_IsSys: '0',
			},
			{
				ItemCode: 'Sn',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0',
				P_IsSys: '0',
			},
			{
				ItemCode: 'Pb',
				ItemName: '0',
				ItemValue: '0',
				IsDefault: '0',
				P_IsSys: '0',
			},
		]
	});

	//炉次选择
	const dialogPlanPopup = ref(false)
	const lcSelect = () => {
		dialogPlanPopup.value = true
	}

	//表格配置
	const columns2 = ref([
		{ label: '制作命令号', key: 'ItemCode', align: 'center' },
		{ label: '计划号', key: 'ItemName', align: 'center' },
		{ label: '熔炼号', key: 'ItemValue', align: 'center' },
		{ label: '状态', key: 'IsDefault', align: 'center' },
		{ label: '计划钢种', key: 'P_IsSys', align: 'center' },
		{ label: '转炉ID号', key: 'P_IsReadOnly', align: 'center' },
		{ label: '冶金路径', key: 'gangbao', align: 'center' },
		{ label: '钢包ID号', key: 'kaishi', align: 'center' },
	]);

	//表格配置
	const tableOpt2 = ref({
		columns: columns2.value,
		localData: [{
				ItemCode: '4B09354',
				ItemName: '4B09354',
				ItemValue: '24412627',
				IsDefault: '计划中',
				P_IsSys: 'S45C-ex',
				P_IsReadOnly: 'BOF4',
				gangbao: '--',
				kaishi: '--',
			},
			{
				ItemCode: '4B09354',
				ItemName: '4B09354',
				ItemValue: '24412627',
				IsDefault: '计划中',
				P_IsSys: 'S45C-ex',
				P_IsReadOnly: 'BOF4',
				gangbao: '--',
				kaishi: '--',
			},
			{
				ItemCode: '4B09354',
				ItemName: '4B09354',
				ItemValue: '24412627',
				IsDefault: '计划中',
				P_IsSys: 'S45C-ex',
				P_IsReadOnly: 'BOF4',
				gangbao: '--',
				kaishi: '--',
			},
			{
				ItemCode: '4B09354',
				ItemName: '4B09354',
				ItemValue: '24412627',
				IsDefault: '计划中',
				P_IsSys: 'S45C-ex',
				P_IsReadOnly: 'BOF4',
				gangbao: '--',
				kaishi: '--',
			},
			{
				ItemCode: '4B09354',
				ItemName: '4B09354',
				ItemValue: '24412627',
				IsDefault: '计划中',
				P_IsSys: 'S45C-ex',
				P_IsReadOnly: 'BOF4',
				gangbao: '--',
				kaishi: '--',
			},
			{
				ItemCode: '4B09354',
				ItemName: '4B09354',
				ItemValue: '24412627',
				IsDefault: '计划中',
				P_IsSys: 'S45C-ex',
				P_IsReadOnly: 'BOF4',
				gangbao: '--',
				kaishi: '--',
			},
			{
				ItemCode: '4B09354',
				ItemName: '4B09354',
				ItemValue: '24412627',
				IsDefault: '计划中',
				P_IsSys: 'S45C-ex',
				P_IsReadOnly: 'BOF4',
				gangbao: '--',
				kaishi: '--',
			},
			{
				ItemCode: '4B09354',
				ItemName: '4B09354',
				ItemValue: '24412627',
				IsDefault: '计划中',
				P_IsSys: 'S45C-ex',
				P_IsReadOnly: 'BOF4',
				gangbao: '--',
				kaishi: '--',
			}
		]
	});
	
	//炉次选择
	const rowClick = (row) => {
		form.value.name = row.ItemValue
		dialogPlanPopup.value = false
	}
</script>

<style lang="scss" scoped>

</style>